<div class="filter-bar p-2 flex items-center gap-4">
  <span class="flex-1"></span>

  <div ngmButtonGroup >
    <button mat-mini-fab [matTooltip]=" 'PAC.Copilot.Roles.AddRole' | translate: {Default: 'Add new role' }"
      (click)="createToolset()">
      <mat-icon fontSet="material-icons-outlined">add</mat-icon>
    </button>
  </div>
</div>

<div class="flex-1 overflow-auto">
  <table mat-table [dataSource]="dataSource()">
    <ng-container matColumnDef="avatar">
      <th mat-header-cell *matHeaderCellDef> {{'PAC.Copilot.Roles.Avatar' | translate: {Default: 'Avatar'} }} </th>
      <td mat-cell *matCellDef="let element">
        <pac-avatar [imageUrl]="element.avatar" class="w-10 h-10 overflow-hidden rounded-full" />
      </td>
    </ng-container>
    <!-- Name Column -->
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> {{'PAC.Copilot.Roles.Name' | translate: {Default: 'Name'} }} </th>
        <td mat-cell *matCellDef="let element">
          @if (element.__edit__) {
            <ngm-input [(ngModel)]="element.name" class="mt-4" />
          } @else {
            {{element.name}}
          }
        </td>
      </ng-container>
  
      <!-- Desc Column -->
      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef> {{'PAC.Copilot.Roles.Description' | translate: {Default: 'Description'} }} </th>
        <td mat-cell *matCellDef="let element">
          @if (element.__edit__) {
            <ngm-input [(ngModel)]="element.description" class="mt-4" />
          } @else {
            {{element.description}}
          }
        </td>
      </ng-container>

      <ng-container matColumnDef="actions" stickyEnd>
        <th mat-header-cell *matHeaderCellDef> {{'PAC.Copilot.Roles.Actions' | translate: {Default: 'Actions'} }} </th>
        <td mat-cell *matCellDef="let element">
          <div class="flex items-center gap-2 " displayDensity="cosy">
            <button mat-icon-button class="opacity-50 hover:opacity-100"
              [matTooltip]="'PAC.KEY_WORDS.Edit' | translate: {Default: 'Edit'}"
              (click)="startEdit(element)"
            >
              <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
            </button>

            <mat-divider vertical style="height: 20px;" />

            <button mat-icon-button class="opacity-50 hover:opacity-100"
              ngmAppearance="danger"
              [matTooltip]="'PAC.KEY_WORDS.Delete' | translate: {Default: 'Delete'}"
              (click)="deleteEntity(element)"
            >
              <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
            </button>
          </div>
        </td>
      </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

<router-outlet #o="outlet"></router-outlet>